<template>
  <div class="task-div">
    <a-collapse>
      <a-collapse-panel key="1" header="每日任务" class="listHeader">
        <a-list bordered style="border-left: none;border-right: none;">

          <!--        <a-list-item class="listHeader">-->
          <!--          <div style="border-left: 5px solid black;">-->
          <!--            <div style="margin-left: 15px">-->
          <!--              每日任务-->
          <!--            </div>-->
          <!--          </div>-->
          <!--        </a-list-item>-->

          <a-list-item v-for="(item,index) in rateList" :key="index" >
            <div class="taskDescription">
              <div>
                {{ item.name }}
              </div>
              <div>
                <a-progress type="line" :showInfo="false" :percent="100*item.rate/item.quota"/>
                <span style="font-size: 10px;color: gray;">
             奖励{{ item.score }}积分
            </span>
                <span style="font-size: 10px;color: gray;">
              {{ item.rate }}/{{ item.quota }}
            </span>
              </div>
            </div>
            <div>
              <div v-if="item.name==='每日签到'">
                <a-button disabled style="border-radius: 3px" v-if="item.rate>=item.quota">已签到</a-button>
                <a-button style="border-radius: 3px" v-else @click="signIn">去签到</a-button>
              </div>
              <div v-else>
                <a-button disabled style="border-radius: 3px" v-if="item.rate>=item.quota">已完成</a-button>
                <a-button disabled ghost style="border-radius: 3px" v-else>未完成</a-button>
              </div>
            </div>
          </a-list-item>


        </a-list>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {get, put, post, tip, del} from "@/common";
import {message} from 'ant-design-vue';

export default {
  name: "TaskList",
  setup(props, {emit}) {
    const rateList = ref({});
    const getTaskRateList = () => {
      get("/score/task/rate").then((res) => {
        rateList.value = res.data;
      })
    };
    getTaskRateList();
    const signIn = () => {
      post("/score/signIn").then((res) => {
        message.success('签到成功!');
        getTaskRateList();
      })
    };
    return {
      rateList,
      getTaskRateList,
      signIn,
    }
  }
}
</script>

<style scoped>
.task-div {
  height: 100%;
  background-color: white;
  border-radius: 5px;
  margin: 5px;
}

.listHeader {
  background-color: rgb(114, 147, 172);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px
}

.taskDescription {
  width: 60%;
}
</style>